
<head>
<title>Experiment that lets you drag frames around</title>
<!--
Fails in Android upto and including XOOM honeycomb
-->
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

<style>
div.frame {position: absolute; left: 0; top: 0; width: 120px; height: 100px; background: green;}
#console {position: absolute; right: 0; top: 0;}
div.map{
	position:fixed;
	top: 100px;
	left: 40px;
}
</style>
</head>

<body>
<div id="console"></div>

<div class="map" id="map"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.prism.gatech.edu/~xxie37/ar/jgestures.min.js"></script>
<script>

	var scale =0.7, minScale;
	var xOffset = 0, yOffset =0;
	var imageObj;
	var ongoingTouches = new Array;
	var isScale=false;
	var i=300;
	var sx, sxx, sy, syy;

	var canvas = document.createElement('canvas');
	canvas.width = 250;
	canvas.height = 250;
	canvas.id = "campusMap";
	var compassDiv = document.getElementById("map");
	compassDiv.appendChild(canvas);
	
	imageObj = new Image();
	imageObj.src = "http://www.prism.gatech.edu/~xxie37/ar/campus_map.jpg";
	minScale = 250/imageObj.width;
	
	/*var centerX = Math.floor((document.getElementById("map").offsetLeft+document.getElementById('canvas').width)/2);
	var centerY = Math.floor((document.getElementById("map").offsetTop+document.getElementById('canvas').height)/2);*/
	
	function showImg(){
		//log(xOffset);
	canvas.style.border = "5px inset brown";
	var context = canvas.getContext('2d');
	//context.clearRect ( 0 , 0 , canvas.width , canvas.height );
	context.drawImage(imageObj, xOffset, yOffset, imageObj.width*scale, imageObj.height*scale );	
	}
function log(message) {
  $('#console').prepend('<div>' + message + '</div>');
}


		function contains(element, point) {
	  // Returns true if the specified element contains a point
	  var $e = $(element);
	  var offset = $e.offset();
	  var x = offset.left;
	  var y = offset.top;
	  var px = point[0], py = point[1];
	  var width = $e.width();
	  var height = $e.height();
	  //log('bounding box: ' + [x, y, width, height]);
	  //log('point: ' + point);
	  return (x < px && px < (x + width)) && (y < py && py < (y + height));
	}
	
	function checkMapManipulation() {
		 $('div.map').each(function(index, frame) {
			var x, y, xx, yy;
			frame.addEventListener('touchstart', function(event) {
			  // Save the position of the touchstart
			  
			  var touches = event.changedTouches;
			  //log(touches.length);
			
			  var touch = event.targetTouches[0];
			  x = touch.pageX;
			  y = touch.pageY;
			  
			  if(touches.length==1) {isScale=false;sx=event.targetTouches[0].pageX; sy=event.targetTouches[0].pageY; sxx=event.targetTouches[1].pageX; syy=event.targetTouches[1].pageY;/*log('touchstart1 x: ' + event.targetTouches[0].pageX+ ' y: ' +event.targetTouches[0].pageY);*/}
			  if(touches.length==2) { isScale=true; sx=event.targetTouches[0].pageX; sy=event.targetTouches[0].pageY; sxx=event.targetTouches[1].pageX; syy=event.targetTouches[1].pageY;/*log('touchstart page at x: ' + sx + ' y: ' + sy);*/}
		      log(isScale);
		  //    log('touchstart targetTouches: ' + event.targetTouches.length);
			});
		
			frame.addEventListener('touchmove', function(event) {
			  var touches = event.changedTouches;
			  if(touches.length==1) {
				  var touch = event.targetTouches[0];
				  
				  var diffX = touch.pageX - x + xOffset;
				  var diffY = touch.pageY - y + yOffset;
	
				  x = touch.pageX;
				  y = touch.pageY;
				 
				  xOffset = diffX;
				  yOffset = diffY;
				  if(xOffset>0) xOffset =0;
				  if(yOffset>0) yOffset = 0;
				  //log(xOffset+" "+yOffset+" "+imageObj.width+" "+imageObj.height);
				  if(xOffset<250-imageObj.width*scale) xOffset =250-imageObj.width*scale;
				  if(yOffset<250-imageObj.height*scale) yOffset = 250-imageObj.height*scale;
			  	  showImg();
			  }
			  else{
				  if(touches.length==2){
					  x = event.targetTouches[0].pageX;
					  y = event.targetTouches[0].pageY;
					  xx = event.targetTouches[1].pageX;
					  yy = event.targetTouches[1].pageY;
					  var dis = (xx-x)*(xx-x)+(yy-y)*(yy-y);
					  var sdis = (sxx-sx)*(sxx-sx)+(syy-sy)*(syy-sy);
					  var ddis = dis-sdis;
					  var posX = (sx+sxx)/2;
					  var posY = (sy+syy)/2;
					  var imgX = posX*scale+xOffset;
					  var imgY = posY*scale+yOffset;
					  
					  var ratio = ddis/(1000*1000);
					 // if(ratio > 0.02 || ratio < -0.02){
					  scale = scale + ratio;
					  //}
					 // var ratio = dis/(250*250);
					  //scale*=ratio;
					  
					  if(scale<minScale) scale=minScale;
					  if(scale>2) scale=2;
				  	  log("two"+scale);
					  xOffset = imgX-posX*scale;
					  yOffset = imgX-posY*scale;
					  if(xOffset>0) xOffset =0;
				  if(yOffset>0) yOffset = 0;
				  //log(xOffset+" "+yOffset+" "+imageObj.width+" "+imageObj.height);
				  if(xOffset<250-imageObj.width*scale) xOffset =250-imageObj.width*scale;
				  if(yOffset<250-imageObj.height*scale) yOffset = 250-imageObj.height*scale;
					  showImg();
				  }
			  };
			  /*
				  $('#map').bind('swipemove', function(event){ event.preventDefault();});
				  $('#map').bind('pinchopen pinchclose', function(el, ev) {
    				scale = ev.scale;
					if(scale< minScale) scale = minScale;
					 x = event.targetTouches[0].pageX;
					  y = event.targetTouches[0].pageY;
					  xx = event.targetTouches[1].pageX;
					  yy = event.targetTouches[1].pageY;
					  var centerX = (x+xx)/2;
					  var centerY = (y+yy)/2;
					  var disX = centerX-xOffset;
					  var disY = centerY-yOffset;
					  disX*=scale;
					  disY*=scale;
					  xOffset = centerX-disX;
					  xOffset = centerY-disY;
					
					//i *= ev.scale;
					//log (i);
   				// $('#map').css("width",i+"px");
				});
					//log("not translate");
					//var translate = 'translate(' + diffX + 'px, ' + diffY + 'px)';
					//$(frame).css('-webkit-transform', translate);
      				//$(div.map).css('-webkit-transform scale(2,2)');
					//$(div.map).css({ 'transform':'scale(50)' });
					//-webkit-transform: scale(2,4);
			  }*/
					  
			  
			 // var translate = 'translate(' + diffX + 'px, ' + diffY + 'px)';
			 // $(frame).css('-webkit-transform', translate);
		
			  // Prevent iPad from scrolling
			  event.preventDefault();
			  // Prevent event from bubbling up to document
			  event.stopPropagation();
			});
		
		  });
	}
		
		
		
		
		
		

					

					
					
					
					
					
					
					
					
					
					
					
					
					
		

	
	
function init() {
 // log('init')

  $('div.frame').each(function(index, frame) {
    var x, y;
    frame.addEventListener('touchstart', function(event) {
      // Save the position of the touchstart
      var touch = event.targetTouches[0];
      x = touch.pageX;
      y = touch.pageY;
   //   log('touchstart page at x: ' + touch.pageX + ' y: ' + touch.pageY);
  //    log('touchstart targetTouches: ' + event.targetTouches.length);
    });

    frame.addEventListener('touchmove', function(event) {
 //     log('touchmove. x: ' + x + ' y: ' + y);
      // Compute the difference between the start and the new position
      var touch = event.targetTouches[0];
      //log('touch at x: ' + touch.pageX + ' y: ' + touch.pageY);
      // Update the position of the frame
      var offset = $(frame).offset();
      var diffX = touch.pageX - x + offset.left;
      var diffY = touch.pageY - y + offset.top;
      x = touch.pageX;
      y = touch.pageY;
      var translate = 'translate(' + diffX + 'px, ' + diffY + 'px)';
      $(frame).css('-webkit-transform', translate);

      // Prevent iPad from scrolling
      event.preventDefault();
      // Prevent event from bubbling up to document
      event.stopPropagation();
    });

    frame.addEventListener('touchend', function(event) {
 //     log('touchend');
    });
  });

  
}

/*function log(message) {
  $('#console').prepend('<div>' + message + '</div>');
}
*/

//init();
//initMap();
//showMap();
checkMapManipulation();
showImg();
</script>

<script src="http://argon.gatech.edu/argon_o.js"></script>
</body>
